<template>
  <div class="bg">
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-aside style="border-right: 1px solid #eee" width="30%">
        <div class="aside">
          <div class="aside_up flex ju_between">
            <div>标题</div>
            <el-button type="primary">主要按钮</el-button>
          </div>
          <div class="aside_search">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input2"
            >
            </el-input>
          </div>
          <div class="aside_main">
            <el-card class="box-card">
              <div class="text item">
                {{ "列表内容 " }}
              </div>
            </el-card>
          </div>
        </div>
      </el-aside>
      <el-container style="padding: 20px">
        <el-header style="height: 30px">
          <div class="flex">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <div class="ava_font">
              <div class="font_title">这是标题</div>
              <div class="font_describe">简介简介简介</div>
            </div>
          </div>
        </el-header>
        <el-divider></el-divider>
        <el-main>Main</el-main>
        <el-divider></el-divider>
        <el-footer style="height: 80px">
          <div>
            <el-input v-model="input" placeholder="请输入内容">
              <el-button slot="append"
                >发送 <i class="el-icon-s-promotion"></i
              ></el-button>
            </el-input>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
     friendList:[
         {
             name:"机器人1",
             avater:"",
             
         },
     ],  
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.ju_center {
  justify-content: center;
}
.ju_between {
  justify-content: space-between;
}
.bg {
  width: 100vw;
  height: 100vh;
  .ava_font {
    margin-left: 10px;
    .font_title {
      font-weight: bold;
      font-size: 16px;
    }
    .font_describe {
    }
  }
}
.aside {
  padding: 10px 20px;
  .aside_up {
    margin-bottom: 10px;
  }
  .aside_search {
  }
  .aside_main {
      margin-top: 30px;
  }
}
</style>